<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>patch</button>
<button>delete</button>
<button>test</button>
</body>
<script type="module">
	import ajax from "./lib/ajax.js";
	const btns = document.querySelectorAll("button");
	btns[0].onclick = async function () {
		// 1- fetch是window对象下的一个方法。
		// console.log(window.fetch);
		// console.log(fetch);
		
		// 2- fetch接收的第一个参数是请求地址，默认的请求方式为get,返回的是Promise实例
		// 发送一个GET请求，请求地址为http://zhangpeiyue.com/scoreList,将结果赋值给常量result
		// const result = fetch("http://zhangpeiyue.com/scoreList");
		// console.log(result);
		
		// 3- 获取响应体数据
		// 3-1
		// result的成功值是Response的实例对象，实例对象的原型中有两种重要方法：text json
		// const result = fetch("http://zhangpeiyue.com/scoreList");
		// result.then(value=>{
		// 	// value是Response实例对象.
		// 	// value.text()获取的是一个Promise实例，成功值为响应体数据（格式为字符串）
		// 	// console.log(value.text());
		// 	// value.text().then(res=>{
		// 	// 	console.log("响应体",res);
		// 	// })
		//
		// 	// value.json()获取的是一个Promise实例，成功值为响应体数据（格式为JSON）
		// 	// console.log(value.json());
		// 	value.json().then(res=>{
		// 		console.log(res);
		// 	})
		// })
		
		// 3-2
		// const result = fetch("http://zhangpeiyue.com/scoreList");
		// result.then(value=>{
		// 	value.json().then(res=>{
		// 		console.log(res);
		// 	})
		// })
		
		// 3-3 非链式调用
		// const result = fetch("http://zhangpeiyue.com/scoreList");
		// const result2 = result.then(value=>{
		// 	return value.json();
		// })
		// result2.then(res=>{
		// 	console.log(res);
		// })
		
		// 3-4 链式调用
		// fetch("http://zhangpeiyue.com/scoreList").then(value => {
		// 	return value.json();
		// }).then(res => {
		// 	console.log(res);
		// })
		
		// 3-5
		const response = await fetch("http://zhangpeiyue.com/scoreList");
		const body = await response.json();
		console.log(body);
	}
	btns[1].onclick = function(){
		// 第一个参数是请求地址，第二个参数是配置对象（配置请求方式，请求头，请求体）
		// fetch("http://zhangpeiyue.com/scoreList",{
		// 	method:"post",// 配置请求方式
		// 	headers:{// 配置请求头
		// 		"Content-Type":"application/json"
		// 	},
		// 	// 配置请求体。用法：相当于xhr.send接收的值
		// 	body:JSON.stringify({
		// 		userName:"张国荣",
		// 		age:12
		// 	})
		// }).then(value=>{
		// 	return value.json();
		// }).then(res=>{
		// 	console.log(res);
		// })
		
		
		fetch("http://zhangpeiyue.com/scoreList",{
			method:"post",// 配置请求方式
			headers:{// 配置请求头
				"Content-Type":"application/x-www-form-urlencoded"
			},
			// 配置请求体。用法：相当于xhr.send接收的值
			body:"userName=马冲&age=18"
		}).then(value=>{
			return value.json();
		}).then(res=>{
			console.log(res);
		})
	}
	btns[2].onclick = async function(){
		const result = await fetch("http://zhangpeiyue.com/scoreList/2",{
			method:"put",
			headers:{
				"Content-Type":"application/json"
			},
			body:JSON.stringify({
				userName:"支鹏飞",
				age:20
			})
		});
		const res = await result.json();
		console.log(res);
	}
	btns[3].onclick = async function(){
		const result = await fetch("http://zhangpeiyue.com/scoreList/3",{
			method:"PATCH",
			headers:{
				"Content-Type":"application/json"
			},
			body:JSON.stringify({
				userName:"张志帆",
				age:18
			})
		});
		const res = await result.json();
		console.log(res);
	}
	btns[4].onclick = async function(){
		const result = await fetch("http://zhangpeiyue.com/scoreList/4",{
			method:"delete"
		});
		const res = await result.json();
		console.log(res);
	}
	btns[5].onclick = async function(){
		// ajax("http://zhangpeiyue.com/scoreList").then(res=>{
		// 	console.log(res);
		// })
		
		// const res = await ajax("http://zhangpeiyue.com/scoreList");
		// console.log(res);
		
		const res = await ajax("http://zhangpeiyue.com/scoreList",{
			params:{
				age:12,
				sex:"男"
			}
		});
		console.log(res);
	}
</script>
</html>